@side-gap: .25rem;
@gradient-mask: -webkit-gradient(linear, left top, right top,
  color-stop(10%, rgba(0, 0, 0, 0)),
  color-stop(30%, rgba(0, 0, 0, 1)),
  color-stop(70%, rgba(0, 0, 0, 1)),
  color-stop(90%, rgba(0, 0, 0, 0))
);

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  // background: url(./images/trans.png) #000724;
  // background-blend-mode: screen;
  background: url(./images/bg.jpg) center top / cover no-repeat;
  overflow: hidden;

  .header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 19.20rem;
    height: 1.3rem;
    mask-image: @gradient-mask;
    -webkit-mask-image: @gradient-mask;
  }

  .header::before {
    content: '';
    display: block;
    width: 100%;
    height: 1.3rem;
    background: url(./images/header-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }

  h1 {
    position: absolute;
    top: .15rem;
    left: 50%;
    transform: translateX(-50%;);
    color: #FFF;
    font-size: .5rem;
    font-weight: 700;
    background: linear-gradient(#FFF 20%, rgba(255, 255, 255, 0.5) 65%, #FFF 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .panels {
    position: relative;
    width: inherit;
    height: inherit;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      position: absolute;
      background-size: cover;
      mix-blend-mode: screen;
    }

    .panel:nth-child(1) {
      top: 1.30rem;
      left: @side-gap;
      width: 4.65rem;
      height: 3.16rem;
      background-image: url(./images/panel-1.png);
    }

    .panel:nth-child(2) {
      top: 4.60rem;
      left: @side-gap;
      width: 4.60rem;
      height: 5.80rem;
      background-image: url(./images/panel-2.png);
    }

    .panel:nth-child(3) {
      top: 1.30rem;
      right: @side-gap;
      width: 4.66rem;
      height: 4.31rem;
      background-image: url(./images/panel-3.png);
    }

    .panel:nth-child(4) {
      top: 4.60rem;
      right: @side-gap;
      width: 4.60rem;
      height: 5.80rem;
      background-image: url(./images/panel-4.png);
    }

    .panel:nth-child(5) {
      top: 1.30rem;
      left: 50%;
      transform: translateX(-50%);
      width: 8.60rem;
      height: 2.95rem;
      background-image: url(./images/panel-5.png);
    }

    .panel:nth-child(6) {
      top: 4.60rem;
      left: 50%;
      transform: translateX(-50%);
      width: 8.60rem;
      height: 4.89rem;
      background-image: url(./images/panel-6.png);
    }

  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 9.45rem;
    height: 1.63rem;
    background-image: url(./images/footer.png);
    background-size: cover;
    mix-blend-mode: screen;
  }
}